<!-- directive:title 易用性_等待遮盖 -->
<!-- directive:breadcrumb 易用性_等待遮盖 -->
<div class="panel-body">
    <!-- directive:pagetaglist 展示,css -->
    <div class='panel panel-default'>
        <div class='panel-heading'> 易用性_等待遮盖 </div>
        <div class='panel-body'>
            <div class="liuloading">
                <div id="sa-loading" class="liuloading1"></div>
                <div id="sa-success" class="liuloading2" style="display: none;">
                    <span class="sa-line sa-tip"></span>
                    <span class="sa-line sa-long"></span>
                    <div class="sa-fix"></div>
                </div>
            </div>
            <input type="button" value="clickme" class="btn btn-danger" onclick="resert()" />
            <form class="yxf14 bigpadding" name="From" ng-class="{'liumask':liumask}">
                <b class="yxf14-title"> <i></i> 开卡表单 </b>
                <div class="yxf14-box">
                    <label class="yxf14-label"> 用户名 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入用户名" style="width:200px;"
                            ng-model="frm.username" name="username"
                            ng-pattern="/^[0-9a-zA-Z\u4e00-\u9fa5]+$/" ng-maxlength="50" maxlength="51">
                        <b class="note" ng-hide="(From.username.$dirty || From.submitted ) && From.username.$invalid">50位 不可使用特殊符号</b>
                        <b ng-show="(From.username.$dirty || From.submitted ) && From.username.$invalid"> 不可使用特殊符号 </b>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label"> 账号 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入账号" style="width:200px;"
                            ng-model="frm.account" name="account"
                            ng-pattern="/^[0-9a-zA-Z_-]+$/" ng-maxlength="20" maxlength="21">
                        <b class="note" ng-hide="(From.account.$dirty || From.submitted ) && From.account.$invalid">20位 不可使用中文以及特殊符号</b>
                        <b ng-show="(From.account.$dirty || From.submitted ) && From.account.$invalid"> 不可使用中文以及特殊符号 </b>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label"> 中奖概率 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入中奖概率" style="width:200px;"
                            ng-model="frm.rote" name="rote"
                            ui-validate="{error1: 'Rule.isNumFixed012($value)', error2: '$value>=0&&$value<=100'}" ng-maxlength="10" maxlength="11">
                        <b class="note" ng-hide="(From.rote.$dirty || From.submitted ) && From.rote.$invalid">10位 整数0-100或保留12位小数</b>
                        <b ng-show="(From.rote.$dirty || From.submitted ) && From.rote.$invalid"> 整数0-100或保留12位小数 </b>
                    </div>
                    <div class="yxf14-control">
                        <b class="note">我不知道为啥还要整一个这个</b>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label must"> 中奖日期 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请选择日期" style="width:200px;"
                            ng-model="frm.lotteryDate" name="lotteryDate"
                            datetime-picker config="{format: 'yyyy-mm-dd', minView:'month'}"
                            ng-required="true" >
                        <b ng-show="(From.lotteryDate.$dirty || From.submitted ) && From.lotteryDate.$invalid"> 必填项 </b>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label must">枚举项</label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入内容" style="width:200px;"
                            ng-model="frm.f09" name="f09"
                            maxlength="5"
                            >
                        <button type="button" class="btn btn-danger" ng-disabled="!frm.f09" ng-click="frm2.f10add()">添加</button>
                        <b class="note">请配置至少一个选项</b>
                    </div>
                    <div class="yxf14-control">
                        <input type="text" style="display:none;"
                            ng-model="frm.f10" name="f10"
                            required convert-to-string
                            >
                        <b ng-show="(From.f10.$dirty || From.submitted ) && From.f10.$invalid"> 必选一项 </b>
                        <ul class="popupMultiBox">
                           <li ng-repeat="row in frm.f10 track by $index">
                               <span>{{ row }}</span>
                               <i class="glyphicon glyphicon-remove" ng-click="frm2.f10delete($index)" ></i>
                           </li>
                        </ul>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label must"> 花费金钱 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入花费金钱" style="width:200px;"
                            ng-model="frm.money" name="money"
                            required ui-validate="{error1: 'Rule.isNumFixed012($value)', error2: '$value>=0&&$value<=100'}" ng-maxlength="10" maxlength="11">
                        <b class="note" ng-hide="(From.money.$dirty || From.submitted ) && From.money.$invalid">10位 整数0-100或保留12位小数</b>
                        <b ng-show="(From.money.$dirty || From.submitted ) && From.money.$invalid"> {{From.money.$error.required?"必填项":"整数0-100或保留12位小数"}} </b>
                    </div>
                </div>
                <div class="yxf14-box">
                    <label class="yxf14-label must"> 彩票单价 </label>
                    <div class="yxf14-control">
                        <input type="text" placeholder="请输入彩票单价" style="width:200px;"
                            ng-model="frm.price" name="price"
                            required ui-validate="{error1: 'Rule.isNum($value)', error2: '$value>=0&&$value<=100'}" ng-maxlength="10" maxlength="11">
                        <b class="note" ng-hide="(From.price.$dirty || From.submitted ) && From.price.$invalid">10位 请输入数字0-100</b>
                        <b ng-show="(From.price.$dirty || From.submitted ) && From.price.$invalid"> {{From.price.$error.required?"必填项":"请输入数字0-100"}} </b>
                    </div>
                </div>
                <!-- 提交 -->
                <div class="yxf14-box">
                    <div class="yxf14-control">
                        <button type="button" class="btn btn-danger" ng-submit-btn="submitFun()">提交表单</button>
                        <button type="button" class="btn btn-grey" ng-click="cancelFun()">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <style type='text/css' ui-bs>
        .liumask{ position: relative; min-height: 100px; }
        .liumask:before {content:" ";position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.05);background-image: url(../../images/loading.6.gif);background-repeat: no-repeat;background-position: center center;background-attachment: fixed;background-size: auto;z-index: 100;}
    </style>
    <style type='text/css' ui-bs>
        .liuloading{width: 0.8em;height: 0.8em;margin: 10px 0;font-size: 100px;overflow: hidden;position: relative;}
        .liuloading1{position: relative;width: 0.8em;height: 0.8em;margin: 0;padding: 0;pointer-events: none;border: 3px solid #eee;border-top-color: #A5DC86;border-radius: 50%;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-animation: liuloadingA1 0.8s linear infinite forwards; animation: liuloadingA1 0.8s linear infinite forwards;}
        .liuloading2 {width: 0.8em;height: 0.8em;border: 3px solid gray;border-radius: 50%;margin: 0;padding: 0;position: relative;box-sizing: inherit;overflow: hidden; border-color: #eee;}
        .liuloading2::before { -webkit-border-radius: 1.2em 0 0 1.2em; border-radius: 1.2em 0 0 1.2em!important; top: -0.07em; left: -0.33em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg)!important; -webkit-transform-origin: 0.6em 0.6em; transform-origin: 0.6em 0.6em; }
        .liuloading2::after { -webkit-border-radius: 0 1.2em 1.2em 0; border-radius: 0 1.2em 1.2em 0; top: -0.11em; left: 0.3em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0em 0.6em; transform-origin: 0em 0.6em; }
        .liuloading2::before,
        .liuloading2::after { content: ''; position: absolute; width: 0.7em; height: 1.2em; background: white; }
        .liuloading2 .sa-line { height: 3px; background-color: #A5DC86; display: block; border-radius: 1.02em; position: absolute; z-index: 2; }
        .liuloading2 .sa-line.sa-tip {width: 0.20em;left: 0.15em;top: 0.43em;-webkit-transform: rotate(45deg);transform: rotate(45deg); -webkit-animation: liuloadingA2 0.75s; animation: liuloadingA2 0.75s; }
        .liuloading2 .sa-line.sa-long {width: 0.42em;right: 0.08em;top: 0.35em;-webkit-transform: rotate(-45deg);transform: rotate(-45deg); -webkit-animation: liuloadingA3 0.75s; animation: liuloadingA3 0.75s; }
        .liuloading2 .sa-placeholder { width: 0.8em; height: 0.8em; border: 3px solid rgba(165, 220, 134, 0.2); -webkit-border-radius: 0.4em; border-radius: 0.4em; border-radius: 50%; box-sizing: content-box; position: absolute; left: -0.08em; top: -0.08em; z-index: 2; }
        .liuloading2 .sa-fix { width: 0.05em; height: 0.9em; background-color: white; position: absolute; left: 0.28em; top: 0.08em; z-index: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
        @-webkit-keyframes liuloadingA1 { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } }
        @keyframes liuloadingA1 { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } }
        @-webkit-keyframes liuloadingA2 { 0% { width: 0; left: 0.01em; top: 0.19em; } 54% { width: 0; left: 0.01em; top: 0.19em; } 70% { width: 0.5em; left: -0.08em; top: 0.37em; } 84% { width: 0.17em; left: 0.21em; top: 0.48em; } 100% { width: 0.20em;left: 0.15em;top: 0.43em; } }
        @keyframes liuloadingA2 { 0% { width: 0; left: 0.01em; top: 0.19em; } 54% { width: 0; left: 0.01em; top: 0.19em; } 70% { width: 0.5em; left: -0.08em; top: 0.37em; } 84% { width: 0.17em; left: 0.21em; top: 0.48em; } 100% { width: 0.20em;left: 0.15em;top: 0.43em; } }
        @-webkit-keyframes liuloadingA3 { 0% { width: 0; right: 0.46em; top: 0.54em; } 65% { width: 0; right: 0.46em; top: 0.54em; } 84% { width: 0.55em; right: 0em; top: 0.35em; } 100% { width: 0.42em;right: 0.08em;top: 0.35em; } }
        @keyframes liuloadingA3 { 0% { width: 0; right: 0.46em; top: 0.54em; } 65% { width: 0; right: 0.46em; top: 0.54em; } 84% { width: 0.55em; right: 0em; top: 0.35em; } 100% { width: 0.42em;right: 0.08em;top: 0.35em; } }
    </style>
</div>

